<template>
  <div class="map-filter">
    <div class="map-filter__body">
      <el-form v-if="type == 'enterprise'" ref="form" class="task-filter__body" label-position="top" label-width="90px">
        <el-form-item>
          <el-input
            v-model="customerName"
            placeholder="请输入您想查询的客户名称"
            prefix-icon="el-icon-search" />
        </el-form-item>
        <el-form-item label="层级">
          <el-select
            v-model="hierarchy"
            style="width: 100%;">
            <el-option
              v-for="(item, index) in hierarchyOptions"
              :key="index"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="关系">
          <!-- <el-select
            v-model="relation"
            style="width: 100%;">
            <el-option
              v-for="(item, index) in relationOptions"
              :key="index"
              :label="item.label"
              :value="item.value" />
          </el-select> -->
          <el-cascader
            v-model="relation"
            style="width: 100%;"
            :options="relationOptions"
            :props="{ value: 'id', label: 'name', emitPath: false }"
            :show-all-levels="false" />
        </el-form-item>
      </el-form>

      <el-form v-else-if="type == 'relation'" ref="form" class="task-filter__body" label-position="top" label-width="90px">
        <el-form-item label="关系类型">
          <el-checkbox-group v-model="relationType">
            <el-checkbox
              v-for="(item, index) in relationTypeOptions"
              :key="index"
              :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="map-filter__footer">
      <span
        slot="footer"
        class="dialog-footer">
        <el-button
          v-debounce="saveClick"
          type="primary">保存</el-button>
        <el-button @click.native="closeClick">取消</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { crmCustomerRelationsConfigQueryTreeListAPI } from '@/api/admin/crm'

export default {
  // 筛选
  name: 'MapFilter',
  props: {
    showType: Number, // 关系图谱主类型
    type: String,
    filterObj: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      customerName: '',
      hierarchy: 2,
      hierarchyOptions: [
        { label: '全部', value: 2 },
        { label: '一层', value: 1 }
      ],
      resData: [], // 响应数据
      relation: 'all',
      relationOptions: [],
      relationType: [],
      relationTypeOptions: []
    }
  },
  computed: {},
  mounted() {
    this.getCustomerRelationsOptions()
    this.$nextTick(() => {
      if (this.filterObj) {
        this.customerName = this.filterObj.customerName
        this.hierarchy = this.filterObj.hierarchy
        this.relation = this.filterObj.relation
      }
    })
  },

  created() {
  },

  beforeDestroy() {},
  methods: {
    /**
     * 获取客户关系选项
     */
    getCustomerRelationsOptions() {
      crmCustomerRelationsConfigQueryTreeListAPI()
        .then(res => {
          this.resData = res.data || []
          this.updateData(this.resData)
        })
        .catch(() => {})
    },

    /**
     * @description: 更新数据
     * @return {*}
     */
    updateData(resData) {
      const typeOptions = [
        { name: '联系人', id: 2 },
        { name: '商机', id: 1 },
        { name: '合同', id: 4 },
        { name: '回款计划', id: 6 },
        { name: '回款', id: 7 },
        { name: '回访', id: 8 },
        { name: '发票', id: 5 },
        { name: '跟进人', id: 3 }]
      // 只展示通类型数据,如果存在并且不是0
      if (this.showType) {
        const types = {
          1: [1, 2], // 上下游
          2: [3, 4] // 上下级
        }[this.showType]
        resData = resData.filter(item => types.includes(item.type))
        this.relationOptions = resData
      } else {
        this.relationOptions = [{ name: '全部', id: 'all' }].concat(resData)
      }

      resData.forEach(item => {
        // options.push(...item.children.map(subItem => {
        //   return {
        //     label: subItem.name,
        //     value: subItem.name
        //   }
        // }))
        typeOptions.push(...(item.children || []))
      })
      this.relationTypeOptions = typeOptions
      this.relationType = this.filterObj?.relationType || typeOptions.map(item => item.id)
    },

    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('close')
    },

    /**
     * @description: 保存
     * @return {*}
     */
    saveClick() {
      const relationTypeArr = []
      const systemTypeArr = []
      this.relationType.forEach(idItem => {
        if ([1, 2, 3, 4, 5, 6, 7, 8].includes(idItem)) {
          systemTypeArr.push(idItem)
        } else {
          relationTypeArr.push(idItem)
        }
      })

      this.$emit('save', {
        customerName: this.customerName,
        hierarchy: this.hierarchy,
        relation: this.relation,
        relationType: this.relationType, // 仅为了保持编辑状态
        relationTypeArr,
        systemTypeArr
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map-filter {
  &__body {
    padding: 16px;
    word-break: break-all;

    ::v-deep .el-form-item {
      margin-bottom: $--interval-base;

      .el-form-item__label {
        padding: 0;
        line-height: unset;
      }
    }
  }

  &__footer {
    padding: 10px;
    text-align: right;
    background-color: #f7f8fa;
    border-top: $--border-base;
  }
}
</style>
